<template>
    <el-button @click="AddParent()" type="primary">添加根节点</el-button>
    <el-tree :expand-on-click-node="false" style="max-width: 600px" :data="data" :props="defaultProps">
        <template #default="{ node, data }">
            <span class="custom-tree-node">
                <span> {{ node.label }}</span>
                <span>
                    <el-button @click="Add(0, data)" type="primary">添加子节点</el-button>
                    <el-button @click="Add(data.id, data)" type="success">修改</el-button>
                    <el-button type="danger">删除</el-button>
                </span>


            </span>
        </template>
    </el-tree>
    <AddBuilding :treeData="treeData" @close="handleClose" v-if="dialogVisible"></AddBuilding>
</template>

<script lang="ts" setup>
import AddBuilding from '../../components/building/Add.vue';
import { getBuildingList } from '../../service/building/building';
import { onMounted, ref } from 'vue'
import { add } from '../../service/fee/fee';

const dialogVisible = ref(false);
interface Tree {
    label: string
    children?: Tree[]
}

const treeData = ref({
    id: 0,
    name: "",
    pid: 0,
    parentName: ""
})
//添加根节点
const AddParent = () => {
    treeData.value.pid = 0;
    treeData.value.parentName = "";
    treeData.value.name = "";
    dialogVisible.value = true;
}
const Add = (id: number, data: any) => {


    treeData.value.id = id;

    if (id == 0) {
        treeData.value.pid = data.id;
        treeData.value.parentName = data.name;
        treeData.value.name = "";
    }
    else {
        treeData.value.pid = data.pid;
        treeData.value.name = data.name;
    }


    // data.id=id;
    console.log(treeData.value);
    dialogVisible.value = true;

}
const handleClose = (val: boolean | undefined) => {
    dialogVisible.value = false;
    if (val) {
        getData();
    }
}

// const handleNodeClick = (data: Tree) => {
//     console.log(data)
// }
const data = ref<any>([])
const getData = async () => {

    const res: any = await getBuildingList(null);
    if (res.errCode === 10000) {
        data.value = res.data.list;
    }
}

onMounted(() => {
    getData();
})


const defaultProps = {
    label: 'name'
}
</script>
<style scoped>
.custom-tree-node {
    display: flex;
    width: 100%;
    justify-content: space-between;
    line-height: 50px;
}

/deep/ .el-tree-node__content {

    height: 40px;
}
</style>